<template>
  <div class="amap-wrap" >
    <el-amap 
      ref="map" 
      vid="amapContainer"
      :zoom="zoom"
      :events="events"
      :amap-manager="amapManager"
      :center="center"
      class="amap-demo">
      <!-- 自身定位 -->
        <el-amap-circle
          v-for="item in circles"
          :key="item.id"
          :center="item.center" 
          :radius="item.radius" 
          :fillColor="item.color" 
          :strokeStyle="item.color" 
          :strokeOpacity="item.strokeOpacity" 
          :strokeWeight="item.strokeWeight"
          :strokeColor="item.color"
        />
        <!-- 停车场显示 -->
        <el-amap-marker
          v-for="(item, index) in parking"
          :key="item.id"  
          :position="item.position"
          :vid="index" 
          :content="item.content" 
          :offset="item.offset" 
          :events="item.events"
          :extData="item"
        />
        <!-- 停车场显示数量 -->
        <el-amap-marker
          v-for="(item, index) in parkingCarsNumber"
          :key="item.id + index"  
          :position="item.position"
          :vid="index" 
          :content="item.text" 
          :offset="item.offsetText" 
          :events="item.events"
          :extData="item"
        />

        <!-- 距离信息 -->
        <el-amap-marker
          v-for="(item, index) in parkingInfo"
          :key="item.id + index"  
          :position="item.position"
          :vid="index" 
          :content="item.text" 
          :offset="item.offset"
          topWhenClick
          zIndex="1000"
        />
      </el-amap>  
  </div>

</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
import { selfLocation } from "./location";
import { walkPlanResult } from "./walking";
let amapManager = new AMapManager();

export default {
  name: "Amap",
  watch: {
    "$store.state.location.selfLocation": {
      handler(newValue) {
        this.myselfLocation();
      }
    }
  },
  data() {
    const _this = this;
    return {
      map: null,
      zoom: 18,
      amapManager,
      center: [121.59996, 31.197646],
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load()
            .then(() => {
              _this.initMap();
            })
        }
      },
      circles: [
        {
          center:[0,0],
          radius: 4,
          color: "#393e43",
          strokeOpacity:0.2,
          strokeWeight:"30"
        }
      ],
      parking: [],
      parkingCarsNumber: [],
      parkingInfo: [],
      parking_end: [],
    }
  },
  mounted() {},
  methods: {
    initMap() {
      this.map = amapManager.getMap();
      this.myselfLocation();
      this.$emit("callbackComponent", {
        function: "loadMap"
      })
    },
    onComplete(result) {
      const lng = result.position.lng;
      const lat = result.position.lat;
      this.circles[0].center = [lng, lat];
    },
    onError(err) {
      this.$message({
        type: "error",
        message: "在谷歌浏览器下大概率定位不了，强烈建议用火狐浏览器！尼玛火狐也有可能定位不了"
      })
      console.log(err.message)
    },
    myselfLocation() {
      selfLocation({
        map: this.map,
        onComplete: (result) => this.onComplete(result),
        onError: (err) => this.onError(err)
      });
    },
    parkingData(data) {
      this.parking = data;
      this.parkingCarsNumber = data;
    },
    showWalkPlan(data) {
      this.parking_end = [data.lnglat.lng, data.lnglat.lat]; // 停车场的位置
      walkPlanResult({
        map: this.map,
        position_start: this.circles[0].center,
        position_end: [data.lnglat.lng, data.lnglat.lat],
        onComplete: (e) => this.walkComplete(e)
      })
    },
    walkComplete(e) {
      this.parkingInfo = [
        {
          position: this.parking_end,
          text: `<div style="color:#fff;background:#34393f;height:50px;line-height:50px;width:200px;border-radius:100px;padding:0 20px;" >距离你${e.routes[0].distance}米 </div>`,
          offset: [-22, -27]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.amap-wrap {
  height: 100vh;
  background: #006600;
}
</style>